/**
 * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
 * Copyright (c) <spug.dev@gmail.com>
 * Released under the AGPL-3.0 License.
 */
import React, { useState } from 'react';
import { Button, Form, Input, message } from 'antd';
import styles from './index.module.css';
import {writeUserInfo} from "../../../libs/storage";
import {Info, UserInfo} from "../../../api/AccountApi";
import FormInput from "../../../components/form/FormInput";
import FormUpload from "../../../components/form/FormUpload";

class Basic extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            loading:false,
            nickname:"",
            email:"",
            pic:""
        }
    }


    componentDidMount() {
        this.setState({
            loading:true
        });
        UserInfo().then(response => {
            if (response.data.code === 200){
                this.setState({
                    pic:response.data.user_info.pic ? response.data.user_info.pic : [],
                    nickname:response.data.user_info.nickname,
                    email:response.data.user_info.email,
                })
            }
        }).finally(this.setState({loading:false}))
    }

    handleSubmit = () => {
        this.props.form.validateFields((err,formData) => {
            Info(formData).then(response => {
               if (response.data.code === 200){
                   message.success(response.data.msg);
                   let picArr = [];
                   try {
                       picArr = JSON.parse(formData.pic);
                   }catch (e) {}
                   let userInfo = {
                       username:formData["username"],
                       pic:picArr.length > 0 && picArr[0].hasOwnProperty("thumbUrl") ? picArr[0]["thumbUrl"] : "",
                       email:formData["email"],
                       nickname:formData["nickname"],
                   };
                   writeUserInfo(userInfo);
               }
            });
        })
    };

    render() {
        return (
            <React.Fragment>
                <div className={styles.title}>基本设置</div>

                <Form style={{maxWidth: 320}}>

                    <FormInput initialValue={this.state.nickname} style={{marginBottom:0}} form={this.props.form} label={"昵称"} field={"nickname"} rules={[{required:true,message:"昵称不能为空"}]}/>

                    <FormInput initialValue={this.state.email} style={{marginBottom:0}} form={this.props.form} label={"邮箱"} field={"email"} rules={[{required:true,message:"邮箱不能为空"}]}/>

                    {Array.isArray(this.state.pic) && <FormUpload single={true} initialValue={this.state.pic} style={{marginBottom:0}} form={this.props.form} label={"头像"} field={"pic"} rules={[{required:true,message:"头像不能为空"}]}/>}

                    <Form.Item style={{marginTop:20}}>
                        <Button type="primary" loading={this.state.loading} onClick={this.handleSubmit}>保存设置</Button>
                    </Form.Item>

                </Form>
            </React.Fragment>
        )
    }
}

export default Form.create()(Basic);
